<template>
	<view class="body dd_body chang_hong" >
		<view class="head_tab">
			<view class="head_tab_top">
				<view class="head_left"  @click="back"><image src="/static/img/fanhui.png"></image></view>
				<view class="head_center hei_38_bold">订单</view>
				<view class="head_right hei_30"></view>
			</view>
		
			<scroll-view class="tab-scroll head_tab_bottom hei_30_bold" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
				
					<text class="tab-scroll_item" v-for="(item, index) in type_arry" :class="item.typeid == type_on ? 'dd_tab_on' : ''" @click="xuan_type(item.typeid,index)">{{ item.typename }}</text>
			</scroll-view>
			
		</view>
		<view class="tab_body">
			<view class="app_content dd_box">


				<view class="qian_24 zanwu" v-if="list.length==0">
					暂无数据
				</view>
				<view class="list hui_26">
					
					<view class="item" v-for="item in list">
						<view class="item_top">
							<view class="item_top_left qian_30">
								订单编号 <text class="hei_30">{{item.order_number}}</text> 
								<image src="/static/img/copy.png" mode="" @click="fuzhi(item.order_number)"></image>
							</view>
							<text class="hong_30">
								{{item.status==0?'待审核':item.status==1?'进行中':item.status==2?'已完成':item.status==3?'已取消':item.status==4?'审核失败':''}}
							</text>
						</view>
						<view class="shang">
							<image :src="item.productiImageUrl?item.productiImageUrl.split(',')[0]:''" mode="" class="xiangmu_img" @click="go_shang(item.productId)"></image>
							<view class="shang_right">
								<view class="shang_name hei_28_bold PingFang">
									{{item.productName}}
								</view>
								<view class="hei_24_bold PingFang xiaofei_box">
								
									<view class="xiaofei_rifht">
									
									积分：<text class="hong_28">{{item.points}}</text>
										
									</view>
									<text>x{{item.num}}</text>
								</view>
							</view>
						</view>
						<view class="item_caozuo">
						    <button class="zong_26_bold PingFang hong_btn"size="small" @click="quxiao(item.id)" v-if="item.status=='0'" >取消订单</button>
							<button class="zong_26_bold PingFang hong_btn"size="small" @click="go('/pages/index/dd_xq?orderid='+item.id)">订单详情</button>
						</view>
					
					</view>

				</view>
			</view>
		</view>






<uni-popup id="tan_login" ref="tan_login" type="center">
<view class="tan_login">
	<view class="tan_login_box">
		<view class="tan_login_logo">
			<image :src="img_url+kefu_logo" mode=""></image>
		</view>
		<view class="hei_38_bold PingFang tan_login_shouquan">
			登录授权
		</view>
		<view class="tan_login_tishi hei_28">
			等你好久啦~
		</view>
		<view class="tan_login_bottom">
			<button type="button"  class="bai_30 chenge_bg"    open-type="getPhoneNumber" lang="zh_CN" @getphonenumber="bindGetPhoneNumber" scope='phoneNumber'>立即授权</button>
		</view>	
	</view>
	<view class="tan_login_close">
		<image src="/static/img/login_close.png" mode=""@click="$refs.tan_login.close()"></image>
	</view>
</view>
</uni-popup>

	</view>
</template>

<script>
	import tabBar from '@/components/tabbar/tabbar.vue';
	import uParse from '@/components/feng-parse/parse.vue';
	
export default {
	data() {
		return {
			img_url: uni.getStorageSync('img_url'),        
			currentPage: '/pages/index/dingdan',
			type_arry: [
				{
				  typeid:'',
				  typename:'全部'
				},{
				  typeid:'0',
				  typename:'待审核'
				},
				{
				  typeid:'1',
				  typename:'进行中'
				},
				{
				  typeid:'2',
				  typename:'已完成'
				},
				{
				  typeid:'3',
				  typename:'已取消'
				},
				{
				  typeid:'4',
				  typename:'审核失败'
				}
				
			],    
			kefu_logo:'',
			type_on: '',
			page:1,
			limit:10,
			is_all:false,
			list:[],
			scrollLeft:0,
			caozuo_item:'',
		
		};
	},
    components: {
    	tabBar,
		uParse
    },
	onShow() {

	},
	onReady() {
		
	},
	mounted() {
		// this.getScrollW();
	},
	onLoad(option) {
		if(option.state){
			this.type_on=option.state
		}
		this.get_list()

		
	},
	//下拉刷新
	onPullDownRefresh: function() {
		this.list = [];
		this.page = 1;
		this.get_list();
	},
	methods: {
		//上拉加载
		onReachBottom() {
			console.log('上拉加载');
			if (this.is_all) {
				uni.showToast({
					title: '没有更多内容了',
					duration: 2000,
					icon: 'none'
				});
				uni.stopPullDownRefresh();
			} else {
				this.page++;
				this.get_list();
			}
		},
		get_list(){
			this.$http
				.get({
					url: '/api/getOrdersByUserId',
					data: {
						page: this.page,
						limit:this.limit,
						status:this.type_on
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.list=this.list.concat(res.list)
						if(res.list.length<this.limit){
							this.is_all=true
						}
					}
				});
		},
		replace_em(str) {
			str = str.replace(/&amp;/g, "");
			str = str.replace(/&nbsp;/g, "");
			str = str.replace(/nbsp;/g, "");
			str = str.replace(/\</g, '&lt;');
			// str = str.replace(/\>/g, '&gt;');
			str = str.replace(/&gt;/g, ">");
			str = str.replace(/gt;/g, ">");
			str = str.replace(/\n/g, '<br/>');
			str = str.replace(/\[em_([0-9]*)\]/g, '<img src="https://imgxh.hongvv.com/zu/static/bkhumor-emoji/$1.gif" border="0" style="width:40rpx"/></img>');
			return str;
		},

		
		bindGetPhoneNumber(e){
			   if(e.detail.errorMessage){
				   uni.showToast({
					title: e.detail.errorMessage,
					icon: 'none'
				   });
				   uni.redirectTo({
					url:'/pages/index/login'
				   })
			   }else{
		
				   //#ifdef MP-WEIXIN
				   this.$http
					.post({
						url: '/mapi/weixin_applet/getphonenumber',
						data: {
							code:e.detail.code,
							source1:'xcx',
							source:'user'
							
						}
					})
					.then(res => {
						if (res.code == 0) {
							uni.setStorageSync("Cookie",res.data.cookie)
							uni.showToast({
								title: '登录成功'
							});
							this.islogin=true
							this.$refs.tan_login.close()
							this.page=1
							this.get_list();
							this.get_isreal()
						}else{
							uni.redirectTo({
								url:'/pages/index/login'
							})
						}
				   });
				   
				   //#endif
	
				   
			   }
		},
		get_user(){
			this.$http
				.post({
					url: '/mapi/user/user'
				})
				.then(res => {
					if (res.code == 0) {
						if(!res.data.user.alipay_openid){
						  //#ifdef MP-ALIPAY
						    this.get_AuthCode()
						  //#endif
						}
					}
				});
		},
		quxiao(orderid){
			this.caozuo_orderid=orderid
			uni.showModal({
				title: '提示',
				content: '确定取消订单？',
				cancelText: "取消", // 取消按钮的文字  
				confirmText: "确认", // 确认按钮的文字  
				showCancel: true, // 是否显示取消按钮，默认为 true
				confirmColor: '#f55850',
				cancelColor: '#666',
				success: (res) => {
				if(res.confirm) {  
					console.log('comfirm') //点击确定之后执行的代码
					this.quxiao_go(orderid)
				} else {  
					console.log('cancel') //点击取消之后执行的代码
					}  
				} 
			})
		},
		quxiao_go(orderid){
			console.log(orderid,99999)
			this.$http
				.delete_api({
					url: '/api/cancelOrder/'+orderid,
				})
				.then(res => {
					if (res.code == 200) {
			            uni.showToast({
			            	title: '取消成功'
			            });
			            setTimeout(()=>{
			            	this.list = [];
			            	this.page = 1;
			            	this.get_list();
			            },500)
						
					}
				});
		},
	

		go_shang(goodsid){
			uni.navigateTo({
				   url:'/pages/index/xiangqing?goodsid='+goodsid
			})
		},
		
		go(src,type){
		   uni.navigateTo({
		   	url:src
		   })	
		},
		
		// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
		getScrollW() {
			var that=this
			const query = uni.createSelectorQuery().in(this);
			query
				.select('.tab-scroll')
				.boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width;
				})
				.exec();
			query
				.selectAll('.tab-scroll_item')
				.boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.type_arry[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.type_arry[i].width = data[i].width+10;
					}
				})
				.exec();
				
				if(this.type_on!=0){
					const obj = this.type_arry.filter(item => item.typeid == that.type_on);
					if(obj.length>0){
						this.scrollLeft=obj[0].left-obj[0].width
					}
				}
		},
		back() {
			uni.switchTab({
				url:'/pages/index/my'
			})
		},
		xuan_type(id,index){
			this.scrollLeft = 0;
			for (let i = 0; i < index - 1; i++) {
				this.scrollLeft += this.type_arry[i].width;
			}
			this.type_on=id
			this.list = [];
			this.page = 1;
			this.get_list();
		},
		fuzhi(text) {
			uni.setClipboardData({
				data: String(text),
				success: function() {
					uni.showToast({
						title: '复制成功',
						duration: 2000
					});
				}
			});
		}
	},
	filters: {
		timeStamp: function(value) {
			if (value == null) {
				return 'null';
			}
			var i = (value + '').length;
			while (i++ < 13) value = value + '0';
			value = Number(value);
			var date = new Date(value);
			//date.setTime(value);
			var month = date.getMonth() + 1;
			var hours = date.getHours();
			if (hours < 10) hours = '0' + hours;
			var minutes = date.getMinutes();
			if (minutes < 10) minutes = '0' + minutes;
			// var time = date.getFullYear() + '-' + month + '-' + date.getDate() + ' ' + hours + ':' + minutes;
			var time = date.getFullYear() + '-' + month + '-' + date.getDate() ;
			return time;
		}
	}
};
</script>

<style>
page {
	background-color: #f0f2f5;
}
.head_center {
	width: 80%;
}
.head_right image {
	width: 43rpx;
	height: 38rpx;
}
.head_tab_bottom {
	overflow: auto;
	white-space: nowrap;
	box-sizing: border-box;
}
.head_tab_bottom::-webkit-scrollbar {
	display: none;
}
.head_tab_bottom text {
	margin-right: 50rpx;
	box-sizing: border-box;
	border-bottom: 1px solid #ffffff;
	line-height: 50rpx;
	position: relative;
	font-family: PingFangSCBold;
	display: inline-block;
}
.head_tab_top {
	border: none;
}
.dd_tab {
	display: flex;
	justify-content: space-between;
}
.dd_tab_on {
	
	position: relative;
	color: #6a3906;
	
}
.dd_tab_on::before{
	content: '';
	display: inline-block;
	width:100%;
	height: 4rpx;
	background-color: #6a3906;
	border-radius: 2rpx;
	position: absolute;
	bottom: -16rpx;
}
.dd_tab {
	display: flex;
	justify-content: space-between;
	padding: 0 32rpx 0;
}

.item {
	padding: 0rpx 20rpx 0;
	background-color: #ffffff;
	margin-bottom: 10rpx;
}
.list {
	margin-top: 10rpx;
}

.item_caozuo {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	padding: 20rpx 0 10rpx;
     border-top: 1px dashed #bbb;
}
.item_caozuo button {
	padding: 0 30rpx;
	height: 56rpx;
	background-color: #ffffff;
	border-radius: 28rpx;
	line-height: 56rpx;
	margin-left: 10rpx;
	margin-bottom: 10rpx;
}
.qian_btn{
	border: solid 1px #999999 ;
}
.hong_btn{
	border: solid 1px #6a3906 ;
}

.top_tishi{
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	background-color: #ffe0eb;
	height: 76rpx;
	justify-content: space-between;
}
.top_tishi_left{
	display: flex;
	align-items: center;
}
.top_tishi_left image{
	width: 30rpx;
	height: 30rpx;
	margin-right: 10rpx;
	
}
.top_tishi_left text{
	max-width: 88%;
}
.close{
	width: 18rpx;
	height: 18rpx;
}
.image{
	vertical-align: bottom;
}
.xiangmu_img{
	width: 160rpx;
	height: 160rpx;
	border-radius: 10rpx;
}

.item_top{
	height: 70rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px dashed #bbbbbb;
}
.item_top_left{
	display: flex;
	align-items: center;
}
.item_top_left text{
	margin: 0 10rpx;
}
.item_top_left image{
	width: 20rpx;
	height: 20rpx;
}
.shang{
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	width: 100%;
}
.shang_right{
	margin-left: 20rpx;
	width: 530rpx;
}
.jibie{
	padding: 0 12rpx;
	height: 40rpx;
	line-height: 40rpx;
	background-color: #edfaf5;
}
.shujv{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 20rpx 0;
	
}
.open_kuaidi{
	width: 688rpx;
	
	background-color: #ffffff;
	border-radius: 5rpx;
	padding: 0 26rpx;
	box-sizing: border-box;
}
.open_kuaidi_title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 116rpx;
	border-bottom: 1px solid #ececec;
}
.open_close{
	width: 26rpx;
	height: 26rpx;
	cursor: pointer;
}
.open_kuaidi_tishi{
	margin: 40rpx 0;
}
.open_kuaidi_list{
	width: 560rpx;
	height: 66rpx;
	background-color: #ffffff;
	border-radius: 5rpx;
	border: solid 1rpx #c6c6c6;
	margin-left: 10rpx;
	margin-bottom: 36rpx;
	display: flex;
	align-items: center;
	padding-left: 16rpx;
}
.open_kuaidi_list input{
	border: none;
	width: 100%;
	height: 100%;
}
.open_kuaidi_list:last-child{
	margin-bottom: 0;
}
.open_kuaidi_bottom{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0rpx 0 40rpx;
}
.open_kuaidi_bottom button{
	width: 214rpx;
	height: 80rpx;
	border-radius: 40rpx;
	line-height: 80rpx;
	text-align: center;
}
.open_kuaidi_bottom button:first-child{
	background-color: #5f3917;
	margin-right: 36rpx;
}
.open_kuaidi_bottom button:last-child{
	background-color: #c6c6c6;
}
.add_danhao_tishi {
	line-height: 44rpx;
	padding: 20rpx 26rpx;
}
.add_gongsi {
	position: relative;
	height: 64rpx;
	background-color: #ffffff;
	border-radius: 4.8rpx;
	width: 100%;
	box-sizing: border-box !important;
	border: solid 1px #c6c6c6;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10rpx;
	box-sizing: border-box;
}
.add_gongsi image{
	    width: 20rpx;
	    height: 10rpx;
}
.add_gongsi .filter-text {
	height: 64rpx;
	border-radius: 4.8rpx;
	border: solid 1px #c6c6c6;
	box-sizing: border-box !important;
}
.tan_danhao {
	margin: 48rpx 0;
}
.tan_danhao input {
	height: 64rpx;
	background-color: #ffffff;
	border-radius: 4.8rpx;
	border: solid 1px #c6c6c6;
	width: 100%;
	padding-left: 16rpx;
	box-sizing: border-box;
}
.add_danhao{
	width: 688rpx;
	
	background-color: #ffffff;
	border-radius: 5rpx;
	padding: 0 0rpx 20rpx;
	box-sizing: border-box;
}
.add_danhao_center{
	padding: 0 30rpx 0 30rpx;
}
.add_danhao .open_kuaidi_bottom {
	margin-top: 60rpx;
}
.add_danhao .open_kuaidi_bottom button:first-child{
	background-color: #e7246a;
}
.tab-scroll_item{
	word-break: keep-all;
}
.zanwu{
	text-align: center;
	line-height: 80rpx;
}
.shang_name{
	word-break: break-all;
	height: 80rpx;
	
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2; 
}
#tan_quxiao{
	z-index: 999;
}
.tan_quxiao{
	background-color: #ffffff;
	box-shadow: 0rpx 0rpx 27rpx 0rpx 
		rgba(39, 39, 39, 0.2);
	border-radius: 10rpx;
	box-sizing: border-box;
}
.tan_yixia_bottom{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 240rpx;
	padding-bottom: 20rpx;
	box-sizing: border-box;
}
.tan_yixia_bottom button:first-child{
	width: 290rpx;
	height: 80rpx;
	background-color: #e7246a;
	border-radius: 44rpx;
	line-height: 80rpx;
	margin-right: 66rpx;
}
.tan_yixia_bottom button:last-child{
	width: 290rpx;
	height: 80rpx;
	background-color: #cacaca;
	border-radius: 44rpx;
	line-height: 80rpx;
}

.tan_quxiao_list{
	padding: 0 46rpx;
	
}
.tan_quxiao_item{
	display: flex;
	align-items: center;
	margin-top:40rpx ;
}
.tan_yixia_title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 128rpx;
	border-bottom: 1px solid #e5e5e5;
	padding: 0 20rpx;
}
.tan_yixia_title image{
	width: 28rpx;
	height: 28rpx;
}
.shiming{
	display: flex;
	align-items: center;
	height: 90rpx;
	border-bottom: 1px dashed #bbbbbb;
}
.shiming image{
	width: 32rpx;
	height: 32rpx;
	margin-right: 4rpx;
	
}
.shiming button{
	width: 124rpx;
	height: 46rpx;
	background-color: #ffffff;
	border-radius: 23rpx;
	border: solid 1rpx #fd4259;
	line-height: 46rpx;
	text-align: center;
}
.zuqi{
	border-bottom: 1px dashed #bbbbbb;
	padding-bottom: 20rpx;
}
.xiaofei_box{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.xiaofei_box image{
	width: 248rpx;
	height: 45rpx;
}
.add_danhao_dizh{
	border-top:10rpx solid #f0f2f5 ;
	padding: 30rpx 30rpx 0;
}
.add_danhao_dizh view{
	margin-bottom: 20rpx;
}
.tan_login{
	width: 600rpx;
	text-align: center;
	box-sizing: border-box;
}

.tan_login_tishi{
	text-align: center;
	line-height: 130rpx;
}
.tan_login_bottom{
	text-align: center;
}
.tan_login_bottom button{
	width: 467rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	margin: 0 auto;
}
.tan_login_logo image{
	width: 124rpx;
	height: 124rpx;
	border: 4rpx solid #ffffff;
	margin-top: -62rpx;
	border-radius: 100%;
	vertical-align: bottom;
	margin-bottom: 30rpx;
}
.tan_login_close image{
	width: 60rpx;
	height: 60rpx;
	margin-top: 60rpx;
}
.tan_login_box{
	height: 420rpx;
	background-color: #ffffff;
	border-radius: 34rpx;
}
.disabled_active{
    background-color: #999 !important;
}
.popup_qian{
	background-color: #ffffff;
	width: 650rpx;
}
.popup_qian_bottom{
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 1px dashed #e5e5e5;
}
.popup_qian_bottom text{
	text-align: center;
}
.daoqi{
	margin-top: 10rpx;
}
.buchong{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 86rpx;
	border-bottom: 1px dashed #bbbbbb;
}
.buchong_go{
	width: 140rpx;
	height: 50rpx;
	background-color: #ffffff;
	border-radius: 25rpx;
	border: solid 1rpx #fd4259;
	line-height: 50rpx;
	text-align: center;
}
</style>
